<template>
  <div class="top">
    <div class="title">配送方式</div>
    <div class="button" @click="isSolid(filterList[0].id)">
      <van-icon v-if="filterList[0].is_solid" size="18" class="success" name="success" color="#0a92e7" />
      <span class="icon"
        :style="{ borderColor: filterList[0].color, color: filterList[0].color }"
        v-else
      >{{ filterList[0].name }}</span>
      <span :class="['text', filterList[0].is_solid ? 'active' : '']">{{ filterList[0].text }}</span>
    </div>
    <div class="title">商家属性 (可以多选)</div>
    <div class="attribute">
        <div class="button" v-for="item in attribute" :key="item.id" @click="isSolid(item.id)" >
            <van-icon v-if="item.is_solid" size="18" class="success" name="success" color="#0a92e7" />
            <span class="icon"
              :style="{ borderColor: item.color, color: item.color }"
              v-else
            >{{ item.name }}</span>
            <span :class="['text', item.is_solid ? 'active' : '']">{{ item.text }}</span>
        </div>
    </div>
  </div>
  <div class="bottom">
    <van-button type="default" @click="isClear">清空</van-button>
    <van-button type="primary" @click="isOk">{{ OkCount === 0 ? '确定' : `确定(${ OkCount })` }}</van-button>
  </div>
</template>

<script setup>
import { computed, defineProps, ref, watch, defineEmits } from 'vue'
const props = defineProps({
  filterList: {
    type: Array,
    default: () => ([])
  }
})
const emit = defineEmits(['submit'])

const attribute = computed(() => {
  return props.filterList.filter((item, index) => {
    return index !== 0 ? item : false
  })
})

// 点击勾选
const isSolid = (id) => {
  props.filterList.forEach(item => {
    if (item.id === id) {
      item.is_solid = !item.is_solid
    }
  })
}

// 获取勾选数量
const OkCount = ref(0)
watch(() => props.filterList, () => {
  OkCount.value = props.filterList.filter(item => {
    return item.is_solid ? item : false
  }).length
}, { deep: true, immediate: true })

// 清空按钮事件
const isClear = () => {
  props.filterList.forEach(item => { item.is_solid = false })
}

// 确认按钮事件
const isOk = () => {
  emit('submit')
}
</script>

<style scoped lang="less">
.top {
    padding: 0 24px 24px 24px;
    .title {
        height: 70px;
        color: #333;
        font-size: 24px;
        line-height: 70px;
    }
    .attribute {
        display: flex;
        flex-wrap: wrap;
    }
}
.button {
    width: 220px;
    height: 66px;
    margin: 0 12px 12px 0;
    padding: 0 12px;
    border: 1px solid #eee;
    line-height: 50px;
    .icon {
        width: 36px;
        height: 36px;
        margin-right: 10px;
        padding: 4px;
        font-size: 28px;
        border: 1px solid;
        border-radius: 8px;
    }
    .success {
        margin-right: 10px;
        top: 2px;
    }
    .text {
        color: #333;
        font-size: 24px;
    }
    .active {
        color: #0a92e7;
    }
}
.bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f1f1f1;
    padding: 14px 10px;
    .van-button {
        flex: 1;
    }
    .van-button--default {
        margin-right: 24px;
    }
}
</style>
